/* * *导航栏组件 * */
<template>
  <div class="nav_tab">
    <ul class="nav_tab_ul">
      <li
        v-for="(item, i) in navList"
        :key="item.id"
        :class="{ active: i === activeIndex }"
        @click="activeFunc(item, i)"
      >
        {{ item.name }}
        <span></span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'navTab',
  props: {
    navList: {
      type: Array,
      defalut: () => {},
    },
    activeIndex: {
      type: Number,
      defalut: 0,
    },
  },
  data() {
    return {
      //   activeIndex: 0, // 高亮
      //   navList: [
      //     { id: 0, name: '规则元目录' },
      //     { id: 1, name: '规则目录' },
      //   ],
    }
  },
  methods: {
    //   点击事件
    activeFunc(item, i) {
      console.log('active', item, i)
      this.$emit('NavClick', item, i)
    },
  },
}
</script>

<style lang="scss" scoped>
.nav_tab {
  width: 100%;
  height: 40px;
  .nav_tab_ul {
    display: flex;
    justify-content: space-between;
    padding: 5px 40px;
    li {
      padding: 10px;
      color: #ffff;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      position: relative;
      span {
        position: absolute;
      }
    }

    li.active {
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      position: relative;

      span {
        position: absolute;
        bottom: 8px;
        left: 0;
        width: 100%;
        height: 8px;

        background: #31a1ec9c;
      }
    }
  }
}
</style>
